<template>
  <el-scrollbar class="scrollbar" :native="false">
    <div class="shop-tree">
      <div class="tree">
        <el-tree ref="tree" :props="props" :load="loadNode" lazy node-key="id">
          <div slot-scope="{ node, data }">
            <div class="tree-custom">
              <el-checkbox
                style="margin-right: 8px"
                v-if="data.eqptId"
                v-model="node.checked"
                @change="handleCheckChange($event, data)"
                >{{ node.label }}</el-checkbox
              >
              <span v-else>{{ node.label }}</span>
            </div>
          </div>
        </el-tree>
      </div>
    </div>
  </el-scrollbar>
</template>
<script>
import { getListByTag } from '../js/floor'
import { getEquipmentList } from '../js/device'
export default {
  name: 'DeviceTree',
  data () {
    return {
      props: {
        label: 'name',
        children: 'children',
        isLeaf: 'leaf'
      },
      checkIds: []
    }
  },
  props: {
    planEqptIds: {
      type: Array,
      required: false,
      default: () => []
    }
  },
  watch: {
    planEqptIds (val) {
      this.$refs.tree.setCheckedKeys(val)
      this.getEquipmentList('eqptIds', 'in', val).then(res => {
        this.checkIds = res.map(e => {
          return {
            eqptId: e.eqptId,
            eqptHls: e.eqptHls
          }
        })
        this.$emit('deviceClick', this.checkIds)
      })
    }
  },
  methods: {
    // 勾选改变
    handleCheckChange () {
      this.checkIds = this.$refs.tree.getCheckedNodes().map(e => {
        return {
          eqptId: e.eqptId,
          eqptHls: e.eqptHls
        }
      })
      this.$emit('deviceClick', this.checkIds)
    },

    // 懒加载函数
    loadNode (node, resolve) {
      let id = node.level === 0 ? 0 : node.key
      this.getListByTag(id, node.level + 1).then(res => {
        this.getEquipmentList('floorId', 'eq', id).then(eqptRes => {
          return resolve([...eqptRes, ...res])
        })
      })
    },

    // 获取设备信息
    async getEquipmentList (column, type, id) {
      const params = {
        // conditions: [
        //   {
        //     column,
        //     type,
        //     value: id
        //   }
        // ],
        current: 1,
        pageSize: 1000,
        eqptTypeId: 'lx1',
        tenantNo: JSON.parse(localStorage.getItem('Visual__User__Info')).tenantNo
      }
      params[column] = id
      const { data } = await getEquipmentList(params)
      if (data.records.length) {
        data.records.forEach(e => {
          const { eqptName, eqptId } = e
          e.name = eqptName
          e.id = eqptId
          e.leaf = true
        })
      }
      return data.records
    },

    // 获取楼层信息
    async getListByTag (parentId, tag) {
      const params = {
        parentId,
        tag
      }
      const { data } = await getListByTag(params)
      return data
    }
  }
}
</script>
<style lang="scss" scoped>
.el-scrollbar {
  height: 100%;
  /deep/ .el-scrollbar__wrap {
    overflow-x: hidden;
  }
}
</style>
